<script>
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import emailBoxService from "@/api/emailbox/emailBoxService";
import Loading from "@/views/organization/instruction/loading.vue";
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            tableData:{
                id:"",
                title:"",
                content:"",
                status:"",
                opinion:"",
                reflectDate:"",
                feebackDate:"",
                organizerId:"",
                organizerName:"",
                receiverId:"",
                receiverName:""
            },
            loading: false,
        };
    },
    computed: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
	},
    components: { Splitpanes , Pane,Loading },
    mounted() {
        
    },
    methods: {
        click(){
            if(this.tableData.title==''|| this.tableData.content=='' || this.tableData.receiverId==''){
                ElMessage({
                    showClose: true,
                    message: '请完善选项',
                    type: 'error',
                })
            }
            else{
                this.loading=true
                console.log(this.tableData)
                this.tableData.organizerId=this.currentUser.id
                this.tableData.organizerName=this.currentUser.name
                emailBoxService.save(this.tableData).then((data)=>{
                    console.log(data)
                    this.$message.success(data);
                    this.loading=false
                    this.tableData.title=''
                    this.tableData.content=''
                    this.tableData.receiverId=''
                })
            }
            
        }
    },
}
</script>
<template>
    <div class="page">
		<div class="jp-table">
			<div class="table-body">
                <div class="main-container">
                    <table>
                        <tr class="email-tr">  
                            <th>反映标题</th>  
                            <td><textarea class="textarea-title" v-model="tableData.title"></textarea></td>  
                        </tr>
                        <tr class="email-tr">  
                            <th>接收人ID</th>  
                            <td><textarea class="textarea-title" v-model="tableData.receiverId"></textarea></td>  
                        </tr>
                        <tr >  
                            <th>反映内容</th>  
                            <td>
                                <textarea class="textarea-content" v-model="tableData.content"></textarea>
                            </td>  
                        </tr>  
                        <!-- <tr >  
                            <th>反映意见</th>  
                            <td>
                                <textarea class="textarea-opinion" v-model="tableData.opinion"></textarea>
                            </td>  
                        </tr> -->
                    </table> 
                    <div class="email-button">
                        <el-button color="#eebe77" plain @click="click">发送</el-button> 
                    </div>
                </div>  
                <Loading class="loading" v-if="loading"></Loading>
            </div>
        </div>
    </div>
</template>
<style scoped>
.page{
    padding: 0;
    overflow: hidden;
}
.table-body{
	height: 100%;
}
.loading{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(255, 255, 255, 0.7);
}
.main-container{
    width: 100%;
    height: 100%;
}
table {  
    width: 100%;
    height: 90%;
    border-collapse: collapse;  
}  
.email-tr{
    height: 50px;
}
th, td {  
    padding: 8px;  
    text-align: left;  
    border-bottom: 1px solid #ddd;
}
  
th { 
    width: 80px;
    background-color: #f2f2f2;  
}  

td,th {  
    font-size: 14px;  
}  
  
/* 可选：增加响应式布局调整 */  
@media (max-width: 700px) {  
    th, td {  
        display: block;  
        width: 100%;
    }
    td{
        height: calc(100% - 50px);
    }
    th::after {  
        content: ":";  
    }  
  
    th, td::before {  
        float: left;  
        font-weight: bold;  
    }  
  
    /* 清除浮动 */  
    th, td {  
        clear: both;  
    }  
}
.email-button{
    margin: 15px;
    display: flex;
    justify-content: end;
}
textarea{
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: left;
    color: #515a6e;
    display: block;
    margin: 0 auto;
    border: none;
    resize: none;  
    line-height: 1.4;
}
.textarea-opinion{
    color: #ff4d4d;
}
.textarea-title,.textarea-status{
    overflow: hidden;
    height: 20px;
}
</style>